<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        @select="handleSelect">
        <el-menu-item index="0">LOGO</el-menu-item>
        <div class="flex-grow" />
        <el-sub-menu index="2">
            <template #title>
                <el-space>
                    <el-avatar :src="profile.avatar" />
                    {{profile.fullname}}
                </el-space>
            </template>
            <el-menu-item index="2-1">消息</el-menu-item>
            <el-menu-item index="2-2">设置</el-menu-item>
            <el-menu-item index="2-3">退出</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>
  
<script setup>
import { storeToRefs } from 'pinia'
import { useInfoStore } from '@/stores/counter'
import { onMounted } from 'vue'
//创建实例
let info = useInfoStore();
onMounted(() => {
    // 调用方法
    info.loadInfo(sessionStorage.id);
})
//解构返回
let { profile } = storeToRefs(info);

</script>
  
<style scoped>
.flex-grow {
    flex-grow: 1;
}
</style>
  